<template>
	<!-- 桌号管理 -->
	<view>
		<view class="head bg-white">
			<view class="text">可自定义修改桌号</view>
			<view class="ccc">列如修改成：A区01桌、B区02桌等等</view>
		</view>
		<scroll-view scroll-y="true" class="min bg-white">
			<view>
				<view class="flex-cb tt">
					<text>桌号名称</text>
					<view class="flex-cb ">
						<!-- <view class="A" @click="handleX(1)">-</view> -->
						<view class="B" @click="handleX(2)">+</view>
					</view>
				</view>
				<view class="" v-for="(i,t) in list" :key="t">
					<view class="solid"></view>
					<view class="item flex-cb" >
						<text>{{i.name}}</text>
						<view class="flex-cb">
							<view class="set" @click.stop="handleset(t)">
								<image src="/static/pageA/icon_bj.png" mode=""></image>
								<text>修改</text>
							</view>
							<view style="color: #ccc;font-size: 28rpx;margin: 0 8rpx;">|</view>
							<view class="look" @click="look(t)">
								<text class="cuIcon-attention"></text>
								<text>预览</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="button flex-c" @click="getimg">报存点单码</view>
		<view class="modal_view flex-c" @click="isshow = 0" v-if="isshow">
			<image :src="url+list[index].qrcode" class="bg" mode="widthFix"></image>
		</view>
		<view class="modal_view foot flex-c" v-if="isindex" >
			<view class="modal_div">
				<view class="title">修改桌号</view>
				<view class="numbar name flex align-center">
					<input type="text" placeholder="列如：A区01桌" @input="handletext" placeholder-style="color:#ccc">
				</view>
				<view class="button_min flex-cb">
					<view class="left" @click="isindex=0">取消</view>
					<view class="center"></view>
					<view class="right" @click="yes">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isindex:0,
				isshow:0,
				index:0,
				num:1,//图片保存进度
				text:'',//桌号信息
				list:[],
				url:''
			};
		},
		onLoad() {
			this.url = this.$base2
			this.getlist()
		},
		methods:{
			getlist(){
				this.$api.tables_list().then(res=>{
					console.log(res);
					this.list = res.data
				})
			},
			handleX(i){
				if(i==1){
					if(this.list.length == 1){
						return
					}else{
						this.list.splice(this.list.length - 1,1)
					}
					
				}else{
					if(this.length !== 1000){
						this.$api.tables_add({
							name:(this.list.length ? this.list[this.list.length - 1].id:0) + 1 + '号桌'
						},true).then(res=>{
							console.log(res);
							this.getlist()
						})
						// this.list.push(JSON.parse(JSON.stringify(this.arr)))
					}else{
						uni.showToast({
							icon:"none",title:'不能再加了'
						})
					}
					// console.log(this.list);
				}
			},
			
			look(i){
				this.isshow = 1
				this.index = i
			},
			handletext(e){
				this.text = e.detail.value
			},
			yes(){//修改桌号
				this.$api.tables_change({
					name:this.text,
				},this.list[this.index].id,1).then(res=>{
					if(res.code == 200001){
						this.getlist()
					}
				})
				this.isindex = 0
				this.text = ''
				console.log(this.index);
			},
			handleset(t){
				this.isindex = 1
				this.index = t
				// this.list[this.index].name = '22'
				console.log(t,this.index);
			},
			getimg(){//保存
				for (let i = 0; i < this.list.length; i++) {
					
					this.savePhoto(this.url+this.list[i].qrcode)

				}
			},

			// 保存图片
			savePhoto (url){
				uni.downloadFile({//下载
					url: url, //图片下载地址
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({//保存图片到系统相册。
								filePath: res.tempFilePath,//图片文件路径
								success: function() {
									uni.showLoading({
										title:'保存中（'+this.num + '/'+this.list.length+')',
										mask:true
									})
									uni.hideLoading()
									this.num ++
								},
								fail: function(e) {
									console.log(e);
									uni.showToast({
										title: '图片保存失败',
										icon: 'none',
									});
								}
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.head,.min,.button{
	height: 100rpx;
	width: 710rpx;
	margin: 20rpx auto;
	border-radius: 10rpx;
	padding: 10rpx 20rpx;
	.text{color: #000;}
	.ccc{color: #cecece;}
}
.min{
	height: calc(100vh - 350rpx);
	overflow: hidden;
	.tt{margin-bottom: 20rpx;}
	.A,.B{
		width: 80rpx;height: 50rpx;border-radius: 10rpx;
		text-align: center;font-size: 40rpx;
	}
	.A{
		border: #e6e6e6 solid 1rpx;color: #999;margin-right: 20rpx;
	}
	.B{
		background: #d7f5eb;
		color: #1cd699;border: #1CD699 solid 1rpx;
	}
	.item{
		// margin-top: 20rpx;
		height: 80rpx;
		.set,.look{
			display: flex;justify-content: space-between;align-items: center;
			color: #1cd699;font-size: 30rpx;
			image{
				width: 25rpx;height: 25rpx;margin-right: 10rpx;
			}
			.cuIcon-attention{
				font-size: 35rpx;
				margin-right: 10rpx;
			}
		}
	}
}
.button{
	background: #1cd699;
	color: #fff;
	height: 75rpx;
}
.bg{
	width: 100%;
	height: 540rpx;
}
.position{
	width: 100%;
	height: 540rpx;
	position: fixed;
	left:0 ;right: 0;top: 0;bottom: 0;
	margin: auto;
	image{
		width: 220rpx;height: 220rpx;
		position: relative;
		top: 145rpx;
		left: 65rpx;
	}
	.text{
		width: 220rpx;
		height: 50rpx;
		color: #fff;
		position: absolute;
		top: 128rpx;
		right: 80rpx;
	}
}
.foot{
	.modal_div{
		width: 532rpx;
		height: auto;
		background: #F3F3F3;
		border-radius: 10rpx;
		.title{
			color: #070707;
			font-weight: 500;
			margin-top: 32rpx;
			margin-bottom: 52rpx;
			text-align: center;
		}
		.name{
			width: 472rpx;
			height: 62rpx;
			background: #F3F3F3;
			border-radius: 10rpx;
			border: 1rpx solid #DADADA;
			margin: auto;
			padding: 0 23rpx 0 0;
			color: #B5B2B5;
			picker,input{
				flex: 1;
				// font-size: rpx;
				margin-left: 23rpx;
			}
		}
		.numbar{
			margin-top: 56rpx;
		}
		.button_min{
			margin-top: 40rpx;
			height: 78rpx;
			border-top: solid 1rpx #DADADA;
			.center{
				width: 1rpx;
				height: 66rpx;
				background: #DADADA;
				border-radius: 1rpx;
			}
			.left,.right{
				flex: 1;
				// font-size: 26rpx;
				text-align: center;
			}
			.right{
				color: #1CD699;
			}
		}
	}
	
}
</style>
